<template>
  <div>
    <a-form :form="form" >
      <a-row >
        <a-col :md="8" :sm="24">
          <a-form-item label="行号" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
            <a-input v-decorator="['no',{ rules: [{ required: true}] }]"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="扩展行号" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
            <a-input v-decorator="['name',{ rules: [{ required: false}] }]"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="状态" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
            <a-input v-decorator="['mnemonicCode',{ rules: [{ required: false}] }]" readOnly></a-input>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <a-table
      :rowKey="record => record.name"
      :columns="columns"
      :dataSource="data"
      :customRow="rowClick"
      :rowClassName="setRowClassName"
      :rowSelection="{selectedRowKeys: selectedRowKeys,type:'checkbox', onChange: OnSelect}"
      bordered
    >
      <span slot="serial" slot-scope="text, record, index">
        {{ index + 1 }}
      </span>
      <span slot="edit" slot-scope="text, record">
        <a @click="() => edit(record)"><a-icon type="edit" /></a>
      </span>
    </a-table>
  </div>
</template>

<script>
import moment from 'moment'
import { getRoleList } from '@/api/manage'
export default {
  name: 'ListArea',
  components: {
  },
  data () {
    return {
      form: this.$form.createForm(this),
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      data: [
        { name: 'A-01-001',
          type: 'OTHER',
          status: 'OK',
          classification: 'OTHER',
          zone: 'AO1' },
        { name: 'A-01-002',
          type: 'OTHER',
          status: 'OK',
          classification: 'OTHER',
          zone: 'AO1' },
        { name: 'A-01-003',
          type: 'OTHER',
          status: 'OK',
          classification: 'OTHER',
          zone: 'AO1' },
        { name: 'A-01-004',
          type: 'OTHER',
          status: 'OK',
          classification: 'OTHER',
          zone: 'AO1' }
      ],
      // 表头
      columns: [
        {
          scopedSlots: { customRender: 'edit' }
        },
        {
          title: '序号',
          scopedSlots: { customRender: 'serial' }
        },
        {
          title: '库位名称',
          dataIndex: 'name'
        },
        {
          title: '库位类型',
          dataIndex: 'type'
        },
        {
          title: '状态',
          dataIndex: 'status'
        },
        {
          title: '库位分类',
          dataIndex: 'classification'
        },
        {
          title: '区域',
          dataIndex: 'zone'
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      selectedRowKeys: [],
      selectedRows: [],
      rowName: '',
      rowClick: record => ({
        on: {
          click: () => {
            this.rowName = record.name
          }
        }
      }),
      setRowClassName: (record) => {
        return this.rowName === record.name ? 'active' : ''
      }
    }
  },
  created () {
    getRoleList({ t: new Date() })
  },
  methods: {
    handleEdit (record) {
      this.$emit('onEdit', record)
    },
    handleOk () {

    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    resetSearchForm () {
      this.queryParam = {
        date: moment(new Date())
      }
    },
    OnSelect (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    edit (record) {
      this.$emit('rowClick', record)
    }
  }
}
</script>
<style>
  .highlight {
    background-color: rgb(255, 192, 105);
    padding: 0;
  }
  .active{
    background-color: #00b4ed
  }
</style>
